"use client";

import { useContext } from "react";
import { Tabs, TabList, TabPanels, Tab, TabPanel, Box } from "@chakra-ui/react";
import MouseKey from "./Mouse/MouseKey";
import DpiSetting from "./Mouse/DPISetting";
import PerformanceSetting from "./Mouse/PerformanceSetting";
import OtherSetting from "./Mouse/OtherSetting";
import DeviceInfo from "./Common/DeviceInfo";
import { MainContext } from "@/src/providers/MainProvider";
import { useTranslation } from "@/src/i18n";

// 定义标签页类型
type TabKey = "mousekey" | "mousedpi" | "mouseconfig" | "mousesetting";

interface TabItem {
  key: TabKey;
  name: string;
  icon: JSX.Element;
}

// 支持V2性能设置的设备名称
const V2_PERFORMANCE_DEVICES = ["G7 Pro", "G3 V2 Pro"] as const;

// 判断是否需要使用V2版本的性能设置
const shouldUsePerformanceV2 = (deviceName: string): boolean => {
  return V2_PERFORMANCE_DEVICES.some((device) => deviceName.includes(device));
};

function MainMouse() {
  const { setCurrentTab, deviceName } = useContext(MainContext);
  const { t } = useTranslation("");

  // 标签页配置
  const tabs: TabItem[] = [
    {
      key: "mousekey",
      name: t("keySetting"),
      icon: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_4346_21734)">
            <path
              d="M4.69865 4.04708L4.46884 4.27689C2.12569 6.62004 2.12569 10.419 4.46884 12.7622L7.33262 15.626C9.67576 17.9691 13.4748 17.9691 15.8179 15.626L16.0477 15.3961C18.3909 13.053 18.3909 9.25401 16.0477 6.91086L13.1839 4.04708C10.8408 1.70393 7.04179 1.70394 4.69865 4.04708Z"
              stroke="currentColor"
              strokeWidth="1.25"
              strokeMiterlimit="10"
            />
            <path
              d="M5.16663 13.4667L13.8833 4.75"
              stroke="currentColor"
              strokeWidth="1.25"
              strokeMiterlimit="10"
            />
            <path
              d="M9.49995 9.1335L4.44995 4.0835"
              stroke="currentColor"
              strokeWidth="1.25"
              strokeMiterlimit="10"
            />
          </g>
          <defs>
            <clipPath id="clip0_4346_21734">
              <rect width="20" height="20" fill="currentColor" />
            </clipPath>
          </defs>
        </svg>
      ),
    },
    {
      key: "mousedpi",
      name: t("dpiSetting"),
      icon: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4.56671 8.0918L2.70837 9.95013L4.56671 11.8085"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M8.5083 4.14984L10.3666 2.2915L12.225 4.14984"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M12.2334 15.7583L10.3751 17.6166L8.51672 15.7583"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M16.175 11.8168L18.0334 9.95843L16.175 8.1001"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M10.3667 11.4419C11.1951 11.4419 11.8667 10.7703 11.8667 9.9419C11.8667 9.11347 11.1951 8.44189 10.3667 8.44189C9.53827 8.44189 8.8667 9.11347 8.8667 9.9419C8.8667 10.7703 9.53827 11.4419 10.3667 11.4419Z"
            fill="currentColor"
          />
        </svg>
      ),
    },
    {
      key: "mouseconfig",
      name: t("performanceSetting"),
      icon: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 1066 1024"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M213.333333 462.08a32 32 0 0 0-32 32v350.72a32 32 0 0 0 64 0v-350.72a32 32 0 0 0-32-32zM245.333333 252.074667V160a32 32 0 0 0-64 0v92.074667a85.333333 85.333333 0 1 0 64 0zM845.226667 462.08a32 32 0 0 0-32 32v350.72a32 32 0 0 0 64 0v-350.72a32 32 0 0 0-32-32zM877.226667 252.074667V160a32 32 0 0 0-64 0v92.074667a85.333333 85.333333 0 1 0 64 0zM529.066667 550.826667a32 32 0 0 0 32-32V160a32 32 0 0 0-64 0v358.826667c0 17.664 14.336 32 32 32zM529.066667 605.44a85.333333 85.333333 0 0 0-32 164.352V844.8a32 32 0 0 0 64 0v-75.008a85.333333 85.333333 0 0 0-32-164.352z"
            fill="currentColor"
          />
        </svg>
      ),
    },
    {
      key: "mousesetting",
      name: t("otherSetting"),
      icon: (
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.875 1.09774C10.3335 0.785129 9.66641 0.78513 9.12496 1.09774L2.72766 4.79122C2.18621 5.10383 1.85266 5.68155 1.85266 6.30676V13.6937C1.85266 14.3189 2.18621 14.8967 2.72766 15.2093L9.12496 18.9028C9.66641 19.2154 10.3335 19.2154 10.875 18.9028L17.2723 15.2093C17.8137 14.8967 18.1473 14.3189 18.1473 13.6937V6.30676C18.1473 5.68155 17.8137 5.10383 17.2723 4.79122L10.875 1.09774ZM9.87496 2.39678C9.95231 2.35212 10.0476 2.35212 10.125 2.39677L16.5223 6.09026C16.5996 6.13492 16.6473 6.21745 16.6473 6.30676V13.6937C16.6473 13.783 16.5996 13.8656 16.5223 13.9102L10.125 17.6037C10.0476 17.6484 9.95231 17.6484 9.87496 17.6037L3.47766 13.9102C3.40031 13.8656 3.35266 13.783 3.35266 13.6937V6.30676C3.35266 6.21745 3.40031 6.13492 3.47766 6.09026L9.87496 2.39678ZM12 10C12 11.1046 11.1046 12 10 12C8.89548 12 8.00005 11.1046 8.00005 10C8.00005 8.89545 8.89548 8.00002 10 8.00002C11.1046 8.00002 12 8.89545 12 10ZM13.5 10C13.5 11.933 11.933 13.5 10 13.5C8.06705 13.5 6.50005 11.933 6.50005 10C6.50005 8.06702 8.06705 6.50002 10 6.50002C11.933 6.50002 13.5 8.06702 13.5 10Z"
            fill="currentColor"
          />
        </svg>
      ),
    },
  ];

  return (
    <Box className="relative h-full flex flex-col">
      <Tabs variant="unstyled" className="flex-1 !flex flex-col">
        <TabList className="mb-4 h-[48px] flex items-center justify-between">
          {tabs.map((tab) => (
            <Tab
              key={tab.key}
              display="flex"
              alignItems="center"
              fontWeight="bold"
              fontSize="sm"
              color="white"
              height="100%"
              position="relative"
              padding="16px"
              _selected={{
                color: "#0066ff",
                "&::after": {
                  content: '""',
                  position: "absolute",
                  bottom: "0",
                  left: "0",
                  width: "100%",
                  height: "2px",
                  backgroundColor: "#0066ff",
                  marginTop: "5px",
                },
                "& svg": { color: "#0066ff" },
                "& img": {
                  // backgroundColor: "#0066ff",
                  // mixBlendMode: "multiply",
                  filter:
                    "brightness(95%) saturate(120%) sepia(60%) hue-rotate(32deg) contrast(105%)",
                },
              }}
              className="!text-base !font-bold"
              onClick={() => {
                setCurrentTab(tab.key);
              }}
            >
              {tab.icon}
              <Box ml={2}>{tab.name}</Box>
            </Tab>
          ))}
        </TabList>
        <TabPanels className="flex-1">
          <TabPanel height="100%">
            <MouseKey />
          </TabPanel>
          <TabPanel className="h-full">
            <DpiSetting />
          </TabPanel>
          <TabPanel pt="0px">
            <PerformanceSetting />
          </TabPanel>
          <TabPanel>
            <OtherSetting />
          </TabPanel>
        </TabPanels>
      </Tabs>
      <Box className="absolute right-6 top-0 h-[48px] flex items-center">
        <DeviceInfo />
      </Box>
    </Box>
  );
}

export default MainMouse;
